<template>
	<scroller class="wrapper">
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
		<text class="text" :style="{color:color}">{{text}}</text>
	</scroller>
</template>

<style>
	.wrapper {

		align-items: center;
		justify-content: center;
	}
	.text {
		font-size:60;
		font-weight: bold;
	}
</style>

<script>
    module.exports = {
        data: {
            color: '#ff0000',
            text: '',
        },
        created: function() {
            this.color = '#ff0000';
            this.text = 'This is Tab 2 Test.';
        }
    }
</script>